<!DOCTYPE html>

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    
    <title>Text Animation - Izmir</title>
    
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="assets/css/just-the-docs.css">
    <link rel="stylesheet" href="assets/css/izmir.css">
    <link rel="stylesheet" href="assets/css/docs.css">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/css/fa-solid.min.css">
    
    <script type="text/javascript" src="assets/js/vendor/lunr.min.js"></script>
    <script type="text/javascript" src="assets/js/just-the-docs.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Begin Jekyll SEO tag v2.6.1 -->
<title>Text Animation | Izmir</title>
<meta name="generator" content="Jekyll v3.8.6" />
<meta property="og:title" content="Text Animation" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="ImageHover CSS Library" />
<meta property="og:description" content="ImageHover CSS Library" />
<link rel="canonical" href="2D-text-animation.html" />
<meta property="og:url" content="2D-text-animation.html" />
<meta property="og:site_name" content="Izmir" />
<script type="application/ld+json">
{"@type":"WebPage","headline":"Text Animation","url":"2D-text-animation.html","description":"ImageHover CSS Library","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->

</head>


<body>

    <div class="page-wrap">
        <div class="side-bar">
            <a href="getting-started.html" class="site-title fs-6 lh-tight">Izmir<span>ImageHover CSS Library</span></a>
            <span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span>
            <div class="navigation main-nav js-main-nav">
                <nav role="navigation" aria-label="Main navigation">
  <ul class="navigation-list">
    <li class="navigation-list-item">
      <a href="demo.html" class="navigation-list-link">Demo</a>
    </li>
    <li class="navigation-list-item">
      <a href="1A-getting-started.html" class="navigation-list-link">Getting Started</a>
    </li>
    <li class="navigation-list-item active">
      <a href="2A-customisation.html" class="navigation-list-link">Customisation</a>
      <ul class="navigation-list-child-list ">
        <li class="navigation-list-item ">
          <a href="2B-border-animation.html" class="navigation-list-link">Border Animation</a>
        </li>
        <li class="navigation-list-item ">
          <a href="2C-image-animation.html" class="navigation-list-link">Image Animation</a>
        </li>
        <li class="navigation-list-item  active">
          <a href="2D-text-animation.html" class="navigation-list-link active">Text Animation</a>
        </li>
        <li class="navigation-list-item ">
          <a href="2E-overlay-style.html" class="navigation-list-link">Overlay Style</a>
        </li>
        <li class="navigation-list-item ">
          <a href="2G-caption-layout.html" class="navigation-list-link">Caption Layout</a>
        </li>
        <li class="navigation-list-item ">
          <a href="2F-animation-delay.html" class="navigation-list-link">Animation Delay</a>
        </li>
      </ul>
    </li>
    <li class="navigation-list-item">
      <a href="3A-custom-properties.html" class="navigation-list-link">Custom Properties</a>
    </li>
  </ul>
</nav>

                <div class="cc-izmir">
                    <a href="https://codecanyon.net/item/izmir-hover-effects-for-elementor/24704473">
                        <h3>Get Izmir for Elementor</h3>
                        <p>Add these hover effects to Wordpress using Elementor!</p>
                        <img src="assets/images/izmir-elementor.jpg" alt="Sample Image">
                    </a>
                </div>
            </div>
        </div>
        <div class="main-content-wrap js-main-content" tabindex="0">
            <div class="page-header">
                <div class="main-content">
                    
                    <div class="search js-search">
                        <div class="search-input-wrap">
                            <input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search Izmir" aria-label="Search Izmir" autocomplete="off">
                            <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon">
                                <title>Search</title>
                                <g fill-rule="nonzero">
                                    <path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z" />
                                    <path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z" />
                                </g>
                            </svg>
                        </div>
                        <div class="js-search-results search-results-wrap"></div>
                    </div>
                    
                    
                </div>
            </div>
            <div class="main-content">
                
                
                <nav class="breadcrumb-nav">
                    <ol class="breadcrumb-nav-list">
                        
                        <li class="breadcrumb-nav-list-item"><a href="2A-customisation.html">Customisation</a></li>
                        
                        <li class="breadcrumb-nav-list-item"><span>Text Animation</span></li>
                    </ol>
                </nav>
                
                
                <div id="main-content" class="page-content" role="main">
                    <h2 id="hover-text-animation">Hover Text Animation</h2>
<p>With each image you can add content between the <code class="highlighter-rouge">figcaption</code> tags which will be displayed on hover of the image. Animations can be applied to this content by wrapping in a div with a text animation class applied. Multiple divs can included to apply different animations to content. In the following markup we are applying the <code class="highlighter-rouge">c4-reveal-up</code> hover effect is been applied to the <code class="highlighter-rouge">h3</code> tag and <code class="highlighter-rouge">c4-reveal-down</code> is been applied to the <code class="highlighter-rouge">&lt;p&gt;</code> tag.</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"c4-izmir"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"https://source.unsplash.com/WLUHO9A_xik/400x300"</span> <span class="na">alt=</span><span class="s">"Sample Image"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;figcaption&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"c4-reveal-up"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;h3&gt;</span>
        Sample Text
      <span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"c4-reveal-up"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;p&gt;</span>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
      <span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/figcaption&gt;</span>
<span class="nt">&lt;/figure&gt;</span>
</code></pre></div></div>

<h3 id="text-animation-classes">Text Animation Classes</h3>

<div class="col-3">
  <div class="col-item">
    <figure class="c4-izmir" tabindex="0">
      <img src="assets/images/image13.jpg" alt="Sample Image" />
      <figcaption>
        <div class="c4-reveal-up">
          <h3>
            Sample Text
          </h3>
        </div>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-reveal-up</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir" tabindex="0">
      <img src="assets/images/image13.jpg" alt="Sample Image" />
      <figcaption>
        <div class="c4-reveal-down">
          <h3>
            Sample Text
          </h3>
        </div>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-reveal-down</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir" tabindex="0">
      <img src="assets/images/image13.jpg" alt="Sample Image" />
      <figcaption>
        <div class="c4-reveal-left">
          <h3>
            Sample Text
          </h3>
        </div>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-reveal-left</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir" tabindex="0">
      <img src="assets/images/image13.jpg" alt="Sample Image" />
      <figcaption>
        <div class="c4-reveal-right">
          <h3>
            Sample Text
          </h3>
        </div>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-reveal-right</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir" tabindex="0">
      <img src="assets/images/image13.jpg" alt="Sample Image" />
      <figcaption>
        <div class="c4-fade-up">
          <h3>
            Sample Text
          </h3>
        </div>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-fade-up</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir" tabindex="0">
      <img src="assets/images/image13.jpg" alt="Sample Image" />
      <figcaption>
        <div class="c4-fade-down">
          <h3>
            Sample Text
          </h3>
        </div>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-fade-down</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir" tabindex="0">
      <img src="assets/images/image13.jpg" alt="Sample Image" />
      <figcaption>
        <div class="c4-fade-left">
          <h3>
            Sample Text
          </h3>
        </div>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-fade-left</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir" tabindex="0">
      <img src="assets/images/image13.jpg" alt="Sample Image" />
      <figcaption>
        <div class="c4-fade-right">
          <h3>
            Sample Text
          </h3>
        </div>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-fade-right</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir" tabindex="0">
      <img src="assets/images/image13.jpg" alt="Sample Image" />
      <figcaption>
        <div class="c4-rotate-up-right">
          <h3>
            Sample Text
          </h3>
        </div>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-rotate-up-right</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir" tabindex="0">
      <img src="assets/images/image13.jpg" alt="Sample Image" />
      <figcaption>
        <div class="c4-rotate-up-left">
          <h3>
            Sample Text
          </h3>
        </div>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-rotate-up-left</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir" tabindex="0">
      <img src="assets/images/image13.jpg" alt="Sample Image" />
      <figcaption>
        <div class="c4-rotate-down-right">
          <h3>
            Sample Text
          </h3>
        </div>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-rotate-down-right</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir" tabindex="0">
      <img src="assets/images/image13.jpg" alt="Sample Image" />
      <figcaption>
        <div class="c4-rotate-down-left">
          <h3>
            Sample Text
          </h3>
        </div>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-rotate-down-left</textarea>
  </div>
</div>


                    
                </div>
            </div>
        </div>
    </div>

</body>

</html>
